<template>
    <div class="cart">
        <van-nav-bar
            fixed
            title="购物车"
            left-text="返回"
            left-arrow
            @click-left="$router.push($route.query.path)"
        />

        <div class="cart-middle" v-if="carts_good">
            <div class="cart-good" v-for="(item,index) of carts_good" :key="item.id">
                <div class="cart_title van-hairline--bottom">
                    <p>{{item.shopname}}</p>
                    <van-icon name="delete" />
                </div>
                <div class="cart_cont">
                    <van-checkbox v-model="checked"></van-checkbox>
                    <van-swipe-cell>
                        <van-card
                            :price="item.price"
                            :desc="item.gdesc"
                            :title="item.gname"
                            class="goods-card"
                            :thumb="item.gimg"
                            @click="$router.push('/detail/'+item.id)"
                        >
                            <template #footer>
                                <van-stepper v-model="carts[index].num" input-width="30px" button-size="25px"/>
                            </template>
                        </van-card>
                        <template #right>
                            <van-button square text="删除" type="danger" class="delete-button" @click="detele(index)"/>
                        </template>
                    </van-swipe-cell>
                </div>
            </div>
        </div>

        <van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit">
            <van-checkbox v-model="checked">全选</van-checkbox>
        </van-submit-bar>
    </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import { A_CARTS_LIST, A_CARTS_GOOD } from "../../store/types";
export default {
    name: "",
    data() {
        return {
            checked: false,
            value: 1
        };
    },
    props: {},
    methods: {
        onSubmit() {},
        ...mapActions("carts", [A_CARTS_LIST, A_CARTS_GOOD]),
        detele(index){
            this.carts_good.splice(index,1)
        }
    },
    async mounted() {
        await this[A_CARTS_LIST]({ type: "carts" });
        await this[A_CARTS_GOOD]();
    },
    beforeRouteEnter(to, from, next) {
        to.query.path = from.path;
        next();
    },
    computed: mapState("carts", ["carts", "carts_good"])
};
</script>

<style scoped>
.cart {
    background: #f3f1f1;

}
.cart-middle{
    margin: 50px 0;
}
.cart-good {
    /* height: 100px; */
    background: #fff;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    /* justify-content: space-around; */
}

.goods-card {
    margin: 0;
    background-color: white;
    padding: 5px 0;
}
.cart_title {
    display: flex;
    font-size: 16px;
    justify-content: space-between;
    align-items: center;
    color: #aeacacd4;
    height: 40px;
    margin: 0 10px;
}
.delete-button {
    height: 100%;
}
.cart_cont {
    margin: 0 10px;
    display: flex;
    align-items: center;
}
.van-swipe-cell {
    flex: 1;
    border: 0;
}
.van-card__price{
    color: red;
    font-weight: bold;
}
.van-card__header{
    margin-left: 10px;
}
</style>
